<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>管理后台-主页</title>
        <header th:replace="header::html"/>
        <style type="text/css">
            .footer{
                position: fixed;
                bottom: 0px;
                width: 100%;
                background-color: #222;
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                line-height: 41px;
                color: #fff;
                padding-left: 10px;
                z-index: 2;
            }
            .footer .copyright{
                margin-left: 10px;
            }
        </style>
    </head>
    <body class="index">
        <!-- 顶部开始 -->
        <div class="container">
            <div class="logo">
                <a href="#">管理后台</a></div>
            <div class="left_open">
                <a><i title="展开左侧栏" class="iconfont">&#xe699;</i></a>
            </div>
            <ul class="layui-nav right" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;" id="show-nickname"></a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd>
                            <a onclick="layer.alert('开发中')">个人信息</a>
                        </dd>
                        <dd>
                            <a onclick="xadmin.open('修改密码','/router?pageName=user/user-password')">修改密码</a>
                        </dd>
                        <dd>
                            <a href="./logout">退出</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item to-index">
                    <a href="/">前台首页</a>
                </li>
            </ul>
        </div>
        <!-- 顶部结束 -->
        <!-- 中部开始 -->
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav">
                </ul>
            </div>
        </div>
        <!-- <div class="x-slide_left"></div> -->
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
            <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
                <ul class="layui-tab-title">
                    <li class="home">
                        <i class="layui-icon layui-icon-home"></i>我的桌面
                    </li>
                </ul>
                <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
                    <dl>
                        <dd data-type="this">关闭当前</dd>
                        <dd data-type="other">关闭其它</dd>
                        <dd data-type="all">关闭全部</dd>
                    </dl>
                </div>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src='/router?pageName=welcome.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                    </div>
                </div>
                <div id="tab_show"></div>
            </div>
        </div>
        <div class="page-content-bg"></div>
        <!--<style id="theme_style"></style>-->
        <!-- 右侧主体结束 -->
        <!-- 中部结束 -->
        <!-- 底部开始 -->
        <div class="footer">
            <div class="copyright">Copyright ©2020 boot-admin v1.0 All Rights Reserved</div>
        </div>
        <!-- 底部结束 -->
        <script type="text/javascript">
            $(function () {
                // 显示用户名
                var nickname = localStorage.getItem("nickname");
                $("#show-nickname").text((nickname != null && nickname != undefined) ? nickname : "---");

                /**
                 * 菜单
                 * @param eleId
                 * @param userId
                 */
                function Menu(eleId, userId) {
                    this.eleId = eleId || "nav";
                    this.userId = userId || "0";
                    this.menuItemTemplate = '<li>' +
                        '   <a onclick="xadmin.add_tab(\'{{menu_title}}\',\'{{menu_url}}\')">' +
                        '       <i class="iconfont">{{menu_icon}}</i>' +
                        '       <cite>{{menu_name}}</cite>' +
                        '   </a>' +
                        '   {{sub_menu}}' +
                        '</li>';

                    this.menuParentTemplate = '<li>' +
                        '   <a href="javascript:;">' +
                        '       <i class="iconfont">{{menu_icon}}</i>' +
                        '       <cite>{{menu_name}}</cite>' +
                        '       <i class="iconfont nav_right">&#xe697;</i>' +
                        '   </a>' +
                        '   {{sub_menu}}' +
                        '</li>';

                    this.subMenu = '<ul class="sub-menu">' +
                        '   {{sub_menu_list}}' +
                        '</ul>';
                }

                Menu.prototype = {
                    init: function (eleId, userId) {
                        eleId = eleId || this.eleId;
                        userId = userId || this.userId;
                        var _this = this;
                        _this.getMenuData(eleId, userId);
                    },
                    /**
                     * 获取菜单数据
                     * @param userId
                     */
                    getMenuData: function (eleId, userId) {
                        var _this = this;
                        $.ajax({
                            url: '/permission/menu',
                            type: 'GET',
                            data: {
                                userId: userId
                            },
                            success: function (res) {
                                if (res.httpCode != 200 || res.retCode != 0) {
                                    return false;
                                }

                                if (res.data.length == 0) {
                                    $('.left-nav').animate({left: '-221px'}, 100);
                                    $('.page-content').animate({left: '0px'}, 100);
                                    $('.page-content-bg').hide();
                                    $('.container .left_open i').hide();
                                    return false;
                                }

                                var htmlStr = _this.generateMenu(res.data);
                                $("#" + eleId).html(htmlStr);
                            },
                            error: function (res) {

                            }
                        });
                    },
                    /**
                     * 生成菜单代码
                     * @param data
                     * @returns {string}
                     */
                    generateMenu: function (data) {
                        var htmlStr = "";
                        var _this = this;
                        if (data.length == 0) {
                            return "";
                        }

                        data.map(function (item, index) {
                            var menuItemStr = item.children ? _this.menuParentTemplate : _this.menuItemTemplate;
                            menuItemStr = menuItemStr.replace(/{{menu_name}}/, item.name);

                            var children = "";
                            // 是否有子菜单
                            if (item.children) {
                                var childList = _this.generateMenu(item.children);
                                if (childList) {
                                    children = _this.subMenu;
                                    children = children.replace(/{{sub_menu_list}}/, childList);
                                    menuItemStr = menuItemStr.replace(/{{menu_title}}/, "");
                                    menuItemStr = menuItemStr.replace(/{{menu_url}}/, "javascript:;");
                                }
                            } else {
                                menuItemStr = menuItemStr.replace(/{{menu_title}}/, item.name);
                                menuItemStr = menuItemStr.replace(/{{menu_url}}/, item.url);
                            }

                            // 设置图标
                            if (item.iconfont) {
                                menuItemStr = menuItemStr.replace(/{{menu_icon}}/, item.iconfont);
                            } else {
                                menuItemStr = menuItemStr.replace(/{{menu_icon}}/, "&#xe6a7;");
                            }
                            menuItemStr = menuItemStr.replace(/{{sub_menu}}/, children);
                            htmlStr += menuItemStr;
                        });
                        return htmlStr;
                    }
                }
                var userId = localStorage.userId;
                var menu = new Menu("nav", userId);
                menu.init();
            });
        </script>
    </body>

</html>